<template>
  <zk-row>
    <zk-col :span="8">
      <zk-select v-model="currentCountry" name="country" placeholder="请选择国家">
        <zk-option
          v-for="cl in countryList"
          :label="cl.name"
          :value="cl.code"
          >
        </zk-option>
      </zk-select>
    </zk-col>
    <zk-col :span="8">
      <zk-select v-model="currentProvince" name="province" placeholder="请选择省份">
        <zk-option
          v-for="pl in provinceList"
          :label="pl.name"
          :value="pl.code"
          >
        </zk-option>
      </zk-select>
    </zk-col>
    <zk-col :span="8">
      <zk-select v-model="currentCity" name="city" placeholder="请选择城市">
        <zk-option
          v-for="cy in cityList"
          :label="cy.name"
          :value="cy.code"
          >
        </zk-option>
      </zk-select>
    </zk-col>
  </zk-row>
</template>
<script>
import * as area from 'src/api/area'
export default {
  name: 'areaSelect',
  data() {
    return {
      countryList: [],
      provinceList: [],
      cityList: [],
      currentCountry: this.country,
      currentProvince: this.province,
      currentCity: this.city
    }
  },
  props: {
    country: {
      type: String,
      default: null
    },
    province: {
      type: String,
      default: null
    },
    city: {
      type: String,
      default: null
    }
  },
  watch: {
    'currentCountry'(val) {
      var self = this
      this.currentProvince = ''
      if (val && val !== '') {
        area.get(val).then(data => {
          self.provinceList = data.body.payload.results
        })
      }
      this.$emit('countrychange', val)
    },
    'currentProvince'(val) {
      var self = this
      this.currentCity = ''
      if (val && val !== '') {
        area.get(val).then(data => {
          self.cityList = data.body.payload.results
        })
      }
      this.$emit('provincechange', val)
    },
    'currentCity'(val) {
      this.$emit('citychange', val)
    }
  },
  mounted() {
    var self = this
    area.get().then(data => {
      self.countryList = data.body.payload.results
    })
  }
}
</script>